<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2024年2月15日 15:57:22
 */
import {Codemirror} from "vue-codemirror";
import {html} from "@codemirror/lang-html";
import {oneDark} from "@codemirror/theme-one-dark";

const $props = defineProps({
  content: {
    type: String,
    default: ''
  },
  height: {
    type: Number,
    default: 500
  }
})

onMounted(() => {
  createEditor()
})
const edit_content = ref('')
const getContent = () => {
  return edit_content.value
}

const createEditor = () => {
  edit_content.value = JSON.parse(JSON.stringify($props.content))
}

const code_mirror_ref = ref(null)
const codeMirrorRef = (e) => {
  code_mirror_ref.value = e
}

defineExpose({
  getContent
})
</script>
<template>
  <div>
    <div>
      <codemirror
          :ref="codeMirrorRef"
          v-model="edit_content"
          :style="{height: `${$props.height}px`}"
          :autofocus="true"
          :indent-with-tab="true"
          :tabSize="2"
          :extensions="[html(), oneDark]"/>
    </div>
  </div>
</template>
<style scoped>

</style>
